<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('表单名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('表单名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('唯一标识')" prop="uniqueKey">
            <el-input v-model="form.uniqueKey" :placeholder="$t('唯一标识')" :disabled="!!form.id" show-word-limit maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('关联业务类型')" prop="busType">
            <dictSelect
              v-model="form.busType"
              :clearable="true"
              dictionary="form_bus_type"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('数据来源字段名称')" prop="joinField">
            <el-input v-model="form.joinField" :placeholder="$t('数据来源字段名称')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('文件上传')" prop="fileUpload">
            <el-radio-group v-model="form.fileUpload">
              <el-radio-button
                v-for="item in fileUploadOptions"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ $t(item.dictLabel) }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('启用流程')" prop="enableProcess">
            <el-radio-group v-model="form.enableProcess">
              <el-radio-button
                v-for="item in fileUploadOptions"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ $t(item.dictLabel) }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('关联表单字段')" prop="joinFormField">
            <el-input v-model="form.joinFormField" :placeholder="$t('关联表单字段')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('保存/修改插入函数事件')" prop="insertFuncEvent">
            <el-select v-model="form.insertFuncEvent" :placeholder="$t('保存/修改插入函数事件')" clearable>
              <el-option
                v-for="dict in insertFuncOptions"
                :key="dict.dictValue"
                :value="dict.dictValue"
                :label="dict.dictLabel"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否特殊表单')" prop="special">
            <el-radio-group v-model="form.special">
              <el-radio-button
                v-for="item in fileUploadOptions"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ $t(item.dictLabel) }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('权限标签')" prop="special">
            <el-input v-model="form.permissions" :placeholder="$t('例：deal:dealbase')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="form:base" />
    </div>
  </div>
</template>

<script>
    import { saveFormBase, getFormBase } from '@/api/dev/form/base/formBase'
    export default {
        data() {
          var checkUniqueKey = (rule, value, callback) => {
            if (!value) {
              callback(new Error(this.$t('必填信息')))
            }
            const reg = /^[a-z_]+$/i
            if (!reg.test(value)) {
              callback(new Error(this.$t('只能填写字母、下划线')))
            }
            callback()
          }
            return {
                // 表单参数
                form: {},
                open: false,
                // 遮罩层
                loading: false,
                fileUploadOptions: [],
                insertFuncOptions: [],
                // 表单校验
                rules: {
                name: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], uniqueKey: [
                    { required: true, validator: checkUniqueKey, trigger: 'blur' }
                ], insertClassName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], insertFuncName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ] }
            }
        },
        created() {
          this.getDicts('sys_yes_no').then(response => {
            this.fileUploadOptions = response.data
          })
          this.getDicts('insert_func_event').then(response => {
            this.insertFuncOptions = response.data
          })
        },
        methods: {
            // 初始化数据
            init(data) {
                if (data != null && data.id !== undefined) {
                    getFormBase(data.id).then(response => {
                        this.form = response.data
                    })
                } else {
                    this.reset()
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    uniqueKey: undefined,
                    busType: undefined,
                    html: undefined,
                    js: undefined,
                    css: undefined,
                    canvasStyle: undefined,
                    magicalJsCodeData: undefined,
                    fileUpload: 'N',
                    enableProcess: 'N',
                    special: 'N',
                    delFlag: undefined,
                    createBy: undefined,
                    updateBy: undefined,
                    createTime: undefined,
                    updateTime: undefined
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveFormBase(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                if (!this.form.id) {
                                  const router = this.$router.resolve({ path: '/system/dragForm/form?formId=' + response.data.id })
                                  window.open(router.href, '_blank')
                                }
                                this.form = response.data
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           }

        }

    }
</script>
